<template>
	<view class="page">
		<app-header bgcolor="#000" colro="#fff"></app-header>
		<view class="hd">
			<text class="cuIcon-back" @click="$pub.back"></text>
			<text class="hd-title over-one-line fo-40">{{ VideoInfo.name | FielPathFormat }}</text>
			<text></text>
		</view>
		<!-- danmu-btn 是显示弹幕按钮 -->
		<view class="videobox">
			<video class="myVideo" id="myVideo" :src="VideoInfo.url" @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu playbackRate></video>
		</view>
	</view>
</template>

<script>
import AppHeader from '../../../common/components/AppHeader/index.vue';
export default {
	components: { AppHeader },
	data() {
		return {
			VideoInfo: '',
			src: '',
			danmuList: [
				{
					text: '后期优化。。。。。。。',
					color: '#ff0000',
					time: 1
				},
				{
					text: '后期优化。。。。。。。。。。。。。。。。。。。。。。。。。。。',
					color: '#ff00ff',
					time: 3
				}
			]
		};
	},
	onReady: function(res) {
		this.videoContext = uni.createVideoContext('myVideo');
		// this.videoContext.playbackRate(1.5);
	},
	onLoad(opt) {
		this.VideoInfo = JSON.parse(opt.opt);
	},
	methods: {
		videoErrorCallback: function(e) {
			console.log('视频错误信息:');
			console.log(e.target.errMsg);
		}
	}
};
</script>

<style lang="less" scoped>
.page {
	background-color: #000;
	height: calc(100vh);
}
.hd {
	padding: 40rpx 20rpx;
	height: 110rpx;
	line-height: 110rpx;
	box-sizing: border-box;
	background-color: #000;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 40rpx;
	.hd-title {
		width: 560rpx;
	}
}
.myVideo {
	width: 100%;
	position: absolute;
	top: calc(50%);
	transform: translate3d(0, -50%, 0);
}
</style>
